<template>
  <div class="edu-page-warp">
    <condition-card @reset="reset" @search="searchList" label-width="110px">
        <el-row>
            <el-col :span="8">
            <el-form-item :label="$t('Parameter.tutorCollenge')">
              <DictSelect v-model="queryParams.personnelColleges" :data="options.faculty" filterable :plzSelect='true' :multiple="true" collapse-tags></DictSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('Parameter.title')">
              <DictSelect v-model="queryParams.titleList" :data="options.title" filterable :plzSelect='true' :multiple="true" collapse-tags></DictSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('tutorGuide.type')">
              <DictSelect v-model="queryParams.type" :data="options.tutorType" ></DictSelect>
            </el-form-item>
          </el-col>
        </el-row>
    </condition-card>
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('tutorGuide.tutorNumberStatistics')}}</div>
      <div class="edu-opertion-bar">
        <div class="float-right">
          <el-dropdown @command="exportRecord">
            <el-button type="primary">
              {{$t('message.export')}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">{{$t('tutorGuide.exportTutorStatistics')}}</el-dropdown-item>
              <el-dropdown-item command="2">{{$t('tutorGuide.exportTutorSummaryStatistics')}}</el-dropdown-item>
              <el-dropdown-item command="3">{{$t('tutorGuide.exportTutor')}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <edu-table url="/api/welcomeservice/tutorCount/list" ref="mainTable" :order="false" :selection="false">
        <el-table-column :label="$t('Parameter.tutorCollenge')" prop="personnelCollegeI18n"/>
        <el-table-column :label="$t('tutorGuide.type')" prop="type">
          <template slot-scope="scope">
            <span  v-if="scope.row.type== 1 ">新生导师</span>
            <span v-if="scope.row.type== 2 " >学院导师</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('Parameter.title')" prop="titleI18n"/>
        <el-table-column :label="$t('tutorGuide.effectiveTutorNumber')" prop="validNum"  />
        <el-table-column :label="$t('tutorGuide.tutorNumber')" prop="sumNum" />
      </edu-table>
    </el-card>
  </div>
</template>
<script>

import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import APIs from "common/src/api/welcomeService/tutorExportImport"

// 导师人数统计
export default {
  name: "tutorNumberStatistics",
  computed: {},
  mounted() {
    this.getOptions();
  },
  data() {
    return {
      options: {
        faculty: [],
        title:[],
        tutorType:[
            {label:'新生导师', value:1},{label:'学院导师', value:2}
        ]
      },
      queryParams: {
        personnelColleges: [],
        titleList: [],
        type:""
      }
    };
  },
  methods: {
    getOptions() {
      //筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: [
          "X_YX","profession"
        ]
      };
      queryDic(data).then(res => {
        UTILS.fillSelect(
            {
              faculty: "X_YX",
              title:"profession"
            },
            res.data,
            this.options
        );
      });
      this.searchList();
    },
    searchList() {
      this.$refs.mainTable.search(this.queryParams);
    },
    exportRecord(type){
      if(type == 1){
          this.exportTutorNumber();
      }else if(type == 2){
          this.exportTutorNumberTotal();
      }else if(type == 3){
          this.exportTutorList();
      }
    },
    exportTutorNumber(){//导出导师人数统计表
      let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, .48)"
        });
        let data = _.cloneDeep(this.queryParams);
        APIs.exportTutorNumber(data).then(res => {
          if (res.code == 200) {
              this.delayRequest(res.data.key, loading);
            } else {
              loading.close();
            }
        });

    },
    exportTutorNumberTotal(){//导出导师人数汇总
        let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, .48)"
        });
        let data = _.cloneDeep(this.queryParams);
        APIs.exportTutorNumberTotal(data).then(res => {
          if (res.code == 200) {
              this.delayRequest(res.data.key, loading);
            } else {
              loading.close();
            }
        });
    },
    exportTutorList(){//导出导师名单
        let loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, .48)"
        });
        let data = _.cloneDeep(this.queryParams);
        APIs.exportTutorList(data).then(res => {
          if (res.code == 200) {
              this.delayRequest(res.data.key, loading);
            } else {
              loading.close();
            }
        });
    },
    async delayRequest(key, loading) {
      await new Promise(resolve => setTimeout(resolve, 5000));
      APIs.getReportStatus(key).then(res => {
          if (res.code == 200 && res.data.status) {
            let path = APIs.exportLogUrl + res.data.path;
            window.open(path);
            loading.close();
          } else {
            this.delayRequest(key, loading);
          }
        })
        .catch(ex => {
          this.delayRequest(key, loading);
        });
    },
    reset(){
        for(const key in this.queryParams){
            if(key == 'type'){
              this.queryParams[key]="";
            }else{
              this.queryParams[key]=[];
            }
        }
        this.searchList();
    }
  }
};
</script>
<style lang="scss" >
</style>
